<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script th:src="@{/layui.js}" charset="utf-8"></script>
    <link rel="stylesheet"  th:href="@{/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/zTree/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <script type="text/javascript" th:src="@{/zTree/js/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/zTree/js/jquery.ztree.core.js}"></script>
    <script type="text/javascript" th:src="@{/zTree/js/jquery.ztree.excheck.js}"></script>
</head>
<body>
<br>
<form class="layui-form" action="" id="form1">
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name"  autocomplete="off" class="layui-input">
        </div>
    </div>
<input type="hidden" name="ids" id="ids" value="1,2,3">
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">角色描述</label>
        <div class="layui-input-inline">
            <input type="text" name="description"  autocomplete="off" class="layui-input">
        </div>
    </div>

</div>

<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">权限</label>
        <div class="layui-input-inline">
            <ul id="pmsTree" class="ztree"></ul>
        </div>
    </div>
</div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <button type="button" onclick="doSave();" class="layui-btn" lay-submit="" lay-filter="demo1">保存</button>
    </div>
</div>
</form>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var layer;
    layui.use(['form','laydate'], function(){
        layer = layui.layer;
    })
    
    
    function doSave() {

        //获取选中的权限id，遍历，拼接成1,2,3格式
        var treeObj = $.fn.zTree.getZTreeObj("pmsTree");//获得对象
        var nodes = treeObj.getCheckedNodes(true);//获取选中的结点数组
        console.log(treeObj);
        console.log(nodes);
        var idsArr = new Array();
        for(var i=0;i<nodes.length;i++){
            var node = nodes[i];
            idsArr.push(node.id);
        }

        console.log(idsArr);
        var ids = idsArr.join(',');
        console.log(ids);
        //把拼接好的权限id数据 赋值给hiddern标签
        $("#ids").val(ids)


        var requestData = $("#form1").serialize();

        $.post("/role/save",requestData,function (responseData) {
            console.log(responseData);
            if(responseData.success == 1){
                layer.alert("添加成功",{yes:function () {
                    parent.layer.closeAll();
                }});
            }else{
                layer.alert("添加失败",{yes:function () {
                    parent.layer.closeAll();
                }});
            }
        });
    }
</script>

<script>
    <!--
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

//    var zNodes =[
//        { id:1, pId:0, name:"随意勾选 1", open:true},
//        { id:11, pId:1, name:"随意勾选 1-1", open:true},
//        { id:111, pId:11, name:"随意勾选 1-1-1"},
//        { id:112, pId:11, name:"随意勾选 1-1-2"},
//        { id:12, pId:1, name:"随意勾选 1-2", open:true},
//        { id:121, pId:12, name:"随意勾选 1-2-1"},
//        { id:122, pId:12, name:"随意勾选 1-2-2"},
//        { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
//        { id:21, pId:2, name:"随意勾选 2-1"},
//        { id:22, pId:2, name:"随意勾选 2-2", open:true},
//        { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
//        { id:222, pId:22, name:"随意勾选 2-2-2"},
//        { id:23, pId:2, name:"随意勾选 2-3"}
//    ];

    $(document).ready(function(){

        //访问接口数据
        $.get("/permission/listJson",function (responseData) {
            //把json数据转成json对象
            var zNodes = responseData.data;

            $.fn.zTree.init($("#pmsTree"), setting, zNodes);
        });

    });
    //-->
</script>
</body>
</html>